<template>
  <div class="mod-poap__poappage">
    <el-dialog v-model="state.drawerPage" title="论文" fullscreen :before-close="handleClose">
      <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
        <!--      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <el-table-column prop="page.title" label="题目" header-align="center" align="center"></el-table-column>
        <el-table-column prop="page.abstracts" label="摘要" header-align="center" align="center">
          <template #default="{ row }">
            <div class="ma_text" :title="row.page.abstracts">
              {{ row.page.abstracts }}
            </div>
          </template>
        </el-table-column>
        <!--      <el-table-column prop="keyword" label="关键词" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="page.author" label="论文作者" header-align="center" align="center"></el-table-column>
        <el-table-column prop="page.url" label="论文正文地址" header-align="center" align="center">
          <template #default="{ row }">
            <a href="{{ row.page.url }}" target="_blank">{{ row.page.url }}</a>
          </template>
        </el-table-column>

        <el-table-column label="是否出版" header-align="center" align="center">
          <template v-slot="scope">
            <p>{{ scope.row.page.publishStatus === 0 ? "已出版" : "未出版" }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="page.publicationDate" label="论文出版时间" header-align="center" align="center"></el-table-column>
      </el-table>
      <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
      <template v-slot:footer>
        <el-button type="info" color="#666dfd" @click="handleClose" size="large" class="closeBtn">点击关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, onBeforeUpdate, onMounted, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./poappage-add-or-update.vue";
import { ElMessageBox } from "element-plus";
import baseService from "@/service/baseService";

const props = defineProps({
  projectId: String,
  projectStatus: Number
});

const visible = ref(false);

const view = reactive({
  getDataListURL: "/poap/poapprojectpage/page",
  getDataListIsPage: true,
  exportURL: "/poap/poappage/export",
  deleteURL: "/poap/poappage",
  deleteIsBatch: true,
  datetimerange: null,
  drawerPage: false,
  dataForm: {
    participantId: "",
    projectId: "" as any,
    pageId: "",
    title: "",
    keyword: "",
    author: "",
    publishStatus: "",
    startDateTime: null as number | null,
    endDateTime: null as number | null
  },
  publishText: [
    { value: 0, label: "已出版" },
    { value: 1, label: "未出版" }
  ],
  pageIds: [] as any[]
});

const state = reactive({ ...useView(view), ...toRefs(view) });

watch(
  () => state.datetimerange,
  (val: number[] | null) => {
    if (val === null) {
      state.dataForm.startDateTime = null;
      state.dataForm.endDateTime = null;
    } else {
      state.dataForm.startDateTime = val[0];
      state.dataForm.endDateTime = val[1];
    }
  }
);

watch(
  () => state.dataList,
  (newValue, oldValue) => {
    getText();
  }
);

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};

const initPage = () => {
  state.drawerPage = true;
  state.dataForm.projectId = props.projectId;
  // if (props.projectStatus === 1 || props.projectStatus === 2) this.buttonShow = false;
  getText();
  refresh();
};
const refresh = () => {
  state.getDataList();
};
const emit = defineEmits(["getPageId"]);
const handleClose = () => {
  ElMessageBox.confirm("确定要关闭吗？", { confirmButtonText: "确认", cancelButtonText: "取消" }).then(() => {
    if (state.dataList) {
      for (let i = 0; i < state.dataList!.length; i++) {
        state.pageIds[i] = state.dataList[i].id;
      }
      emit("getPageId", state.pageIds);
    }
    state.drawerPage = false;
  });
};

const getText = () => {
  state.dataList = state.dataList?.map((item) => {
    return { ...item, publishText: "" };
  });
  if (state.dataList) {
    for (let i = 0; i < state.dataList.length; i++) {
      if (state.dataList[i].page.publishStatus === 0) state.dataList[i].publishText = "未出版";
      else if (state.dataList[i].page.publishStatus === 1) state.dataList[i].publishText = "已出版";
    }
  }
};

defineExpose({ initPage });
</script>
<style lang="less" scoped>
.ma_text {
  height: 10em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  position: relative;
}
</style>
